<template>
  <view class="page user_account">
    <view class="a-content">
      <view class="c-item c-item--avatar">
        <text>我的头像</text>
        <image />
      </view>
      <view class="c-item">
        <text>昵称</text>
        <view>小猪</view>
      </view>
      <view class="c-item c-item--mobile">
        <text>手机号码</text>
        <view class="i-right">
          <text>123123123</text>
          <button open-type="getPhoneNumber" @getphonenumber="getUesrMobile">
            <text class="iconfont icon">&#xe602;</text>
            一键获取
          </button>
        </view>
      </view>
    </view>
    <view class="a-btn" @tap="handleLogout">
      <button>退出登录</button>
    </view>
  </view>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data () {
    return {};
  },
  methods: {
    ...mapActions("user", ["logout"]),
    getUesrMobile(e) {
    },
    handleLogout () {
      this.showModal('是否退出当前账号?', '', '确认', () => {
        this.logout().then(() => {
          this.swi("/pages/index/index");
        });
      })
    }
  },
};
</script>

<style lang="less" scoped>
.user_account {
  background: #f7f7f7;
  .a-content {
    .c-item {
      height: 100rpx;
      padding: 0 30rpx;
      background: #fff;
      .layout_flex(@j:space-between);
      > text {
        font-size: 32rpx;
        font-weight: 500;
        color: #666;
      }
      &--avatar {
        height: 140rpx;
        border-bottom: 1rpx solid #eaeaea;
        image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          background: #000;
        }
      }
      &--mobile {
        margin-top: 30rpx;
        .i-right {
          .layout_flex(@j:center);
          > text {
            font-size: 32rpx;
            font-weight: 500;
          }
          > button {
            .icon {
              margin-right: 5rpx;
              font-size: 40rpx;
            }
            .layout_flex(@j:center);
            width: 200rpx;
            height: 64rpx;
            margin-left: 20rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: #fff;
            background: #34a112;
            border-radius: 32rpx;
          }
        }
      }
    }
  }

  .a-btn {
    position: fixed;
    bottom: 80rpx;
    .layout_flex(@j:center);
    width: 100%;
    > button {
      width: 690rpx;
      height: 80rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ff3d2b;
      border: 1rpx solid #ff3d2b;
      border-radius: 40rpx;
    }
  }
}
</style>
